<template>
    <div class="detail">
        <div class="detail-box"></div>
        <div class="detail-con" v-for="(item, index) in conlist.data">
            <van-nav-bar title='产品详情' left-text="返回" left-arrow @click-left="onClickLeft" />
            <div class="detail-img">
                <img :src="item.img" alt="" srcset="">
                <div class="detail-title">
                    <!-- <h3>{{ item.name }}</h3> -->
                    <!-- <p>{{ item.Eng }}</p> -->
                </div>
            </div>
            <div class="detail-say">
                <h4>介绍 :
                </h4>
                <van-text-ellipsis :content="item.text" expand-text="展开" collapse-text="收起" />
            </div>
            <div class="detail-part">
                <ul>
                    <li>
                        <div class="standard">
                            <h4>杯型：</h4>
                            <div class="standards-btn">
                                <ul>
                                    <li v-for="(item, index) in listA" :class="activeA == index ? 'active' : ''"
                                        @click="changeColorA(item, index)">{{ item }}</li>
                                </ul>
                            </div>
                        </div>
                    </li>

                    <li>
                        <div class="standard">
                            <h4>温度：</h4>
                            <div class="standards-btn">
                                <ul>
                                    <li v-for="(item, index) in listB" :class="activeB == index ? 'active' : ''"
                                        @click="changeColorB(item, index)">{{ item }}</li>
                                </ul>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="standard">
                            <h4>糖：</h4>
                            <div class="standards-btn">
                                <ul>
                                    <li v-for="(item, index) in listC" :class="activeC == index ? 'active' : ''"
                                        @click="changeColorC(item, index)">{{ item }}</li>
                                </ul>
                            </div>
                        </div>
                    </li>

                </ul>
            </div>
            <div class="detail-addCar">
                <div class="detail-addPrice">
                    <div class="add-title">
                        <h5 style="display: flex;">￥<h4>{{ item.price }}</h4>
                        </h5>
                        <p>{{ item.name }} ￥<span>{{ item.price }}</span> ({{ item.cup }}/{{ item.temp }}/{{ item.sugar }})
                        </p>
                    </div>
                    <div class="add-btn">
                        <span class="iconfont icon-jianhao"></span>
                        <p>1</p>
                        <span class="iconfont icon-jiahao"></span>
                    </div>
                </div>
                <div class="detail-addBtn">
                    <ul>
                        <li>
                            <span class="iconfont icon-aixin1"></span>
                            <span @click="collect(item)">收藏口味</span>
                        </li>
                        <li>
                            <span class="iconfont icon-gouwuchefill"></span>
                            <span @click="goCar">加入购物车</span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</template>
<style lang="scss">
@import url(../static/style/reset.css);
@import "../static/style/variable.scss";

html {
    height: 100%;

    body {
        height: 100%;

        .detail {
            .detail-box {
                position: fixed;
                width: 100%;
                height: 100%;
                background-color: #000;
                opacity: .5;
                z-index: 1000;
                // border-radius: 15px;
            }

            .detail-con {
                position: fixed;
                top: 41px;
                left: 27px;
                width: 86%;
                height: 85%;
                background-color: #fff;
                z-index: 1000;
                border-radius: 10px;

                .detail-img {
                    position: relative;
                    width: 50%;
                    height: 9rem;
                    margin: 0 auto;

                    img {
                        width: 100%;
                        height: 100%;
                    }

                    .detail-title {
                        position: absolute;
                        bottom: -20px;
                        left: 20px;
                        text-align: center;
                        width: 9rem;
                        text-overflow: ellipsis;
                        overflow: hidden;
                        word-break: break-all;
                        white-space: nowrap;
                        // background-color: pink;

                        h3 {
                            font-size: 18px;
                            color: rgb(82, 87, 88);
                        }

                        p {
                            margin-top: .3667rem;
                            color: #686663;
                            font-size: 12px;
                        }
                    }
                }

                .detail-say {
                    width: 100%;

                    h4 {
                        width: 4rem;
                        border-left: 3px solid #ccc0b4;
                        font-size: 17px;
                        padding-left: .5333rem;
                    }

                    .van-text-ellipsis {
                        margin-left: .8rem;
                        margin-top: .5333rem;
                        font-size: 13.1px;
                    }
                }

                .detail-part {
                    width: 90%;
                    margin: 1rem auto 0;
                    height: 8rem;

                    ul {
                        li {
                            .standard {
                                display: flex;

                                h4 {
                                    margin-top: .2667rem;
                                    width: 3.2rem;
                                    font-weight: normal;
                                    color: #130101;
                                    font-size: 13.5px;
                                }

                                .standards-btn {
                                    ul {
                                        display: flex;

                                        li {
                                            width: 4rem;
                                            border: 1.2px solid #e2cfba;
                                            border-radius: 25px;
                                            height: 1.6rem;
                                            margin-bottom: .8rem;
                                            text-align: center;
                                            line-height: 1.6rem;
                                            margin-right: .8rem;
                                            color: #ccc0b4;
                                            font-size: 12px;

                                            &.active {
                                                background-color: #ccc0b4;
                                                color: #f7f4f0;
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }
                }

                .detail-addCar {

                    width: 100%;
                    height: 4rem;
                    // background-color: orangered;
                    border-top: 1px solid #e9e7e7;
                    border-bottom: 1px solid #e9e7e7;

                    .detail-addPrice {
                        display: flex;
                        justify-content: space-between;
                        width: 92%;
                        margin: 0 auto;
                        height: 3rem;
                        // background-color: pink;

                        .add-title {
                            margin-top: .5333rem;

                            h4 {
                                font-size: 18px;
                                color: #383838;
                            }

                            p {
                                margin-top: .3rem;
                                font-size: 11.5px;
                            }
                        }

                        .add-btn {
                            display: flex;
                            line-height: 1.3333rem;
                            margin-top: 1.5rem;

                            span {
                                color: #2b4c7e;
                                font-size: 20px;
                            }

                            p {
                                margin: 0 .6667rem;
                            }
                        }
                    }

                    .detail-addBtn {
                        position: absolute;
                        bottom: 32px;
                        left: 17px;
                        width: 90%;
                        height: 2.6667rem;

                        ul {

                            display: flex;
                            height: 100%;
                            justify-content: space-around;

                            li {
                                margin-top: .8rem;
                                width: 6.4rem;
                                height: 82%;

                                border-radius: 5px;
                                font-size: 12.4px;
                                line-height: 2.2rem;

                                &:nth-child(1) {
                                    background-color: #dbe7f2;
                                    color: #88afd5;
                                    border: 1px solid #88afd5;

                                    span {
                                        margin-left: .55rem;
                                    }
                                }

                                &:nth-child(2) {
                                    background-color: #70a4d8;
                                    color: #fff;
                                    border: 1px solid #dbe7f2;
                                }

                                span {
                                    margin-left: .4rem;
                                }
                            }
                        }
                    }
                }
            }


        }
    }
}
</style>  
<script lang="ts" setup>
import { reactive, ref, defineComponent, onMounted, computed, onUpdated, watch } from "vue";
import { useRoute, useRouter } from 'vue-router';
import { getConList, getTotalList, getAddList, getCollect, collectList, modifyCup, modifyTemp, modifySugar } from '../request';
// import store from "@/store";
import { useStore } from 'vuex'
import { showSuccessToast } from 'vant';
const store = useStore()
const route = useRoute();
let conId = route.query.id;
const onClickLeft = () => history.back();
const text = '简单即是美味，萃取经典浓缩咖啡，以水调和，香气浓郁蔓溢。'
const activeA: any = ref(0);
const activeB: any = ref(0);
const activeC: any = ref(0);


const listA: any[] = reactive(['大杯', '中杯']);
const listB: any[] = reactive(['冰', '热']);
const listC: any[] = reactive(['无糖', '半糖', '标准糖']);

const changeColorA = (item: any, index: any) => {
    activeA.value = index;
    console.log(item);
    modifyCup({ con_id: conlist.data[0].id, con_cup: item }).then(content => {
        console.log(content);
        contentData()
    }).catch(error => {
        console.log(error);
    })
}
const changeColorB = (item: any, index: any) => {
    activeB.value = index;
    modifyTemp({ con_id: conlist.data[0].id, con_temp: item }).then(content => {
        console.log(content);
        contentData()
    }).catch(error => {
        console.log(error);
    })
}
const changeColorC = (item: any, index: any) => {
    activeC.value = index;
    modifySugar({ con_id: conlist.data[0].id, con_sugar: item }).then(content => {
        console.log(content);
        contentData()
    }).catch(error => {
        console.log(error);
    })
}


let conlist: any = reactive({
    data: []
})

const contentData = () => {
    getConList({ con_id: conId }).then((content: any) => {

        // console.log(content);
        let { result } = content;
        let hot = result.map((item: any) => {
            let obj: any = {};
            obj.id = item.con_id;
            obj.name = item.con_name;
            obj.img = item.con_img;
            obj.Eng = item.con_Eng;
            obj.text = item.con_text;
            obj.sign = item.con_sign;
            obj.temp = item.con_temp;
            obj.price = item.con_price;
            obj.sugar = item.con_sugar;
            obj.cup = item.con_cup;
            obj.total = item.con_total;
            return obj
        })
        conlist.data = hot;

        // store.commit('setAAA', hot);
    })
        .catch(err => {
            console.log(err);

        })
}
contentData()
//计算价格

onUpdated(() => {
    const jia: any = document.querySelector('.iconfont.icon-jiahao');
    const jian: any = document.querySelector('.iconfont.icon-jianhao');
    const count: any = document.querySelector('.add-btn p');
    const price: any = document.querySelector(".add-title h4");
    const price2: any = document.querySelector(".add-title p span");

    jia.onclick = () => {
        count.innerText++;
        gerTotal()
    }

    let gerTotal = () => {
        price2.innerHTML = count.innerText * conlist.data[0].price;
        price.innerHTML = price2.innerHTML
        // localStorage.setItem("total", price.innerHTML)
        getTotalList({ con_id: conId, con_total: price.innerHTML }).then(content => {
            console.log(content);
        }).catch(error => {
            console.log(error);

        })
    }
    gerTotal()
    jian.onclick = () => {
        count.innerHTML--;
        if (count.innerHTML < 1) {
            count.innerHTML = 1
        }
        gerTotal()
    }
})


//跳转购物车
const router = useRouter();


const goCar = () => {
    getConList({ con_id: conId }).then((content: any) => {
        let { result } = content;
        let carName: any = conlist.data[0].name;
        let carImg = conlist.data[0].img;
        let carCup = conlist.data[0].cup;
        let carTemp = conlist.data[0].temp;
        let carSugar = conlist.data[0].sugar;
        let carTotal = result[0].con_total;
        getAddList({ car_id: conId, car_name: carName, car_img: carImg, car_cup: carCup, car_temp: carTemp, car_sugar: carSugar, car_total: carTotal }).then((content: any) => {
            console.log(content);
        })
            .catch(err => {
                console.log(err);
            })
        showSuccessToast(`加入成功`);
    })
        .catch(err => {
            console.log(err);

        })
}

const collect = (item: any) => {

    getCollect({ collect_id: item.id, collect_name: item.name, collect_img: item.img, collect_text: item.text, collect_price: item.price })
        .then(content => {
            showSuccessToast("收藏成功")
            console.log('11', content);
        }).catch(error => {
            console.log(error);
        })
}



</script>